<template>
  <div class="pay-but">
    <a-modal
      :visible="lastvisible"
      :width="800"
      okText="保存"
      title="交付单"
      @cancel="close"
    >
      <template slot="footer">
        <a-button type="primary" @click="close">
          打印
        </a-button>
      </template>
      <div class="bg" style="font-size: 14px;">
        <tr class="da" style="font-weight: bold">
          <td colspan="6">车辆信息</td>
        </tr>
        <tr class="da">
          <td>品牌</td>
          <td colspan="2">{{ model.brand }}</td>
          <td>品牌车型</td>
          <td colspan="2">{{ model.brandModel }}</td>
        </tr>
        <tr>
          <td colspan="1">车架号VIN码</td>
          <td colspan="5">{{ model.vin }}</td>
        </tr>
        <tr class="da" style="font-weight: bold">
          <td colspan="6">接收方信息</td>
        </tr>
        <tr>
          <td>接收方姓名</td>
          <td colspan="2">{{ model.receiverName }}</td>
          <td>接收方电话</td>
          <td colspan="2">{{ model.receiverPhone }}</td>
        </tr>
        <tr>
          <td>证件类型</td>
          <td colspan="2">{{ model.receiverCertType }}</td>
          <td>证件号码</td>
          <td colspan="2">{{ model.receiverCertNo }}</td>
        </tr>
        <tr>
          <td colspan="1">交付时间</td>
          <td colspan="5">{{ model.deliverTime }}</td>
        </tr>
        <tr>
          <td colspan="1">交付地点</td>
          <td colspan="5">{{ model.deliveryAddr }}</td>
        </tr>
        <tr class="da">
          <td colspan="6" style="font-weight: bold">交付方信息</td>
        </tr>
        <tr>
          <td>交付方姓名</td>
          <td colspan="2">{{ model.deliveryStaffName }}</td>
          <td>交付方电话</td>
          <td colspan="2">{{ model.deliveryStaffPhone }}</td>
        </tr>
        <tr class="at" style="height: 50px;line-height: 50px;">
          <td colspan="1">交付清单</td>
          <td colspan="5">
            <span v-for="(item, index) in deliverList" :key="index" style="padding: 0 10px">{{ item }}</span>
          </td>
        </tr>
      </div>
    </a-modal>
  </div>

</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import { getOrderManagerInfo } from '@/api/api'
import moment from 'moment'

export default {
  name: 'CxmOrderManagerModal',
  data() {
    return {
      deliverList: [],
      title: '订单管理',
      manys: '',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      lastvisible: false,

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmOrderManager/add',
        edit: '/cxm/cxmOrderManager/edit',
        findWqnrList: '/cxm/cxmWqnrLog/public/findWqnrList'
      },
      showFindWqnrList: false,
      findWqnrList: [],
      objectionContents: '',
      array: ['1234', '5678']
    }
  },
  methods: {
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model)
      // /sale/cxmSaleDeliverInfo/queryById
      getAction('/sale/cxmSaleDeliverInfo/queryById', { id: this.model.id }).then((res) => {
        console.log(res)
        if (res.success) {
          if (res.result) {
            this.model = Object.assign({}, res.result)
            this.model.brand = record.brand
            this.model.brandModel = record.brandModel
            if (this.model.receiverCertType == 1) {
              this.model.receiverCertType = '身份证'
            }
            if (res.result.deliverContents) {
              this.deliverList = res.result.deliverContents.split(',')
            }
            // if (res.result.originalEquipmentId) {
            //   this.zhuangbeiList = res.result.originalEquipmentId.split(',')
            // }
            console.log(this.deliverList)
          }
        }
      })
      this.lastvisible = true
    },
    close() {
      this.$emit('close')
      this.lastvisible = false
      this.showFindWqnrList = false
    },

    handleCancel() {
      this.close()
    },
    showModal(record) {
      console.log(record)
      this.model = record
      this.model.receiptTime = this.model.receiptTime.slice(0, 10)
      this.zhrmb(record.amount)
      this.lastvisible = true
    },
    showDrawer(record) {
      this.model = Object.assign({}, record)

      let params = {
        id: this.model.id
      }

      getOrderManagerInfo(params).then((res) => {
        console.log(res.result)
        this.model = res.result
        console.log(this.model)
      })
      this.visible = true

      let params2 = {
        wqId: this.model.id,
        wqType: '1',
        paixu: 'asc'
      }
      getAction(this.url.findWqnrList, params2).then((res) => {
        console.log(res)
        if (res.success) {
          console.log(this.showFindWqnrList)
          this.showFindWqnrList = true
          console.log(res.result)
          this.findWqnrList = res.result
        }
      })
    },
    handleSubmit(record) {
      const that = this
      //let that = this.model;

      let method = 'put'
      let formData = {
        id: that.model.id,
        objectionContents: that.objectionContents,
        confirmStatus: 4
      }

      httpAction(this.url.edit, formData, method)
        .then((res) => {
          if (res.success) {
            // that.$message.success(res.message)
            that.$emit('ok')
            location.reload()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
      this.visible = false
    }
  },
  filters: {
    filterTime(time) {
      moment
      return moment(time).format('YYYY-MM-DD')
    },
    filterNumber(value) {
      return Number(value).toFixed(2) + '元'
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  display: flex;
  lex-wrap: wrap;
  position: relative;

  .top-tit {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;

    .lket {
      flex: 1;
    }

    .lkgh {
      flex: 1;
    }
  }

  .bg {
    tr {
      td {
        width: 200px;
        text-align: center;
        border: 1px solid black;
        padding: 10px 10px 10px 10px;
      }
    }
  }

  .last-tit {
    position: absolute;
    bottom: 0;
    display: flex;

    span {
      text-align: center;
      width: 100px;
      display: block;
    }
  }

  .left-cent {
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;

    .ant-form {
      padding-top: 5px;
      display: flex;

      .ant-btn {
        margin-top: 3px;
      }
    }

    .listinfor {
      border: 1px solid #dddddd;
      overflow: hidden;

      .ant-table-wrapper {
        width: 100%;
      }

      .ant-pagination {
        margin-left: 350px;
      }
    }
  }

  .right-cent {
    flex: 1;
    padding: 20px;

    .mx-top {
      margin: 18px 0 18px 0;
      overflow: scroll;

      .ant-table-wrapper {
        width: 100%;

        .ant-table-row {
          height: 80px;
        }
      }
    }

    .mx-top2 {
      margin: 18px 0 18px 0;
      overflow: scroll;

      .ant-table-wrapper {
        width: 135%;

        .ant-table-row {
          height: 80px;
        }
      }
    }
  }

  .mx-center {
    border: 1px solid #aaaaaa;
    padding: 15px;
    display: flex;
    margin-top: 10px;

    .let {
      display: flex;
      flex: 1;
    }

    .cent {
      display: flex;
      flex: 1;
    }

    .rig {
      display: flex;
      flex: 1;
    }
  }

  .mx-bot {
    border: 1px solid #aaaaaa;
    padding: 2px 10px 10px 10px;
    margin-top: 10px;

    .mx-infor {
      margin-top: 10px;
      display: flex;

      .let {
        display: flex;
        flex: 1;
        line-height: 30px;
      }

      .cent {
        display: flex;
        flex: 1;
        line-height: 30px;
      }

      .rig {
        display: flex;
        line-height: 30px;

        .tit {
          width: 70px;
        }

        .ant-input {
          width: 120px
        }
      }
    }

    .bzinfor {
      display: flex;

      .tit {
        width: 70px;
      }

      .ant-input {
        height: 100px;
      }
    }

    .payment {
      margin-top: 10px;
      display: flex;

      .pay-let {
        display: flex;
        flex: 1;

        .ant-select {
          width: 150px;
          margin-left: 5px;
        }
      }

      .pay-cen {
        flex: 1;
        padding-top: 5px;

        span {
          color: red;
        }
      }

      .pay-but {
        flex: 0.7;
        display: flex;
        justify-content: right;

        .ant-btn {
          border-radius: 15px;
        }

      }
    }
  }
}
</style>